<template>
  <div id="con">
    <van-nav-bar class="top" fixed placeholder title="我的收货地址">
      <template #left>
        <van-icon
          color="#666"
          name="arrow-left"
          size="20"
          @click="$router.back()"
        />
      </template>
    </van-nav-bar>
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      :disabled-list="disabledList"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      @select="onsure"
    />
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>
<script>
export default {
  name: "Address",
  data() {
    return {
      chosenAddressId: "1",
      list: [
        {
          id: "1",
          name: "袁浩1",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true,
        },
        {
          id: "2",
          name: "袁浩2",
          tel: "1310000000",
          address: "浙江省杭州市拱墅区莫干山路 50 号",
        },
      ],
      disabledList: [
        {
          id: "3",
          name: "袁浩3",
          tel: "1320000000",
          address: "浙江省杭州市滨江区江南大道 15 号",
        },
      ],
      cartlist: [],
    };
  },
  created() {
    const cartlist = this.$route.params.cartlist;
    this.cartlist = cartlist;
  },
  methods: {
    onSubmit() {},
    onAdd() {
    },
    onEdit() {},
    onsure(val) {
      this.$router.push({
        name: "Confirmorder",
        params: {
          val,
          cartlist: this.cartlist,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
#con {
  padding: 20px;
  box-sizing: border-box;
  background-color: #eee;
  height: 100%;
}
.address {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  font-size: 14px;
  color: #232323;
  padding: 10px;
  box-sizing: border-box;
  text-align: left;
}
.cartlist {
  margin-top: 10px;
  width: 100%;
  .van-card {
    border-radius: 10px;
    background-color: #fff;
  }
}
</style>